<template>
  <div class="list">
    <div class="pro">
      <div class="box">
        <div v-for="item in listAll" :key="item" @click="jump(item.article_id)">
          <div>
            <img :src="item.article_cover" style="width: 100%; height: 100%" />
          </div>
          <div class="title">{{ item[fieldA] }}</div>
        </div>
      </div>
    </div>
    <div class="page">
      <el-pagination
        :page-size="12"
        :pager-count="6"
        :currentPage="page"
        @current-change="handlePage"
        :total="total"
        layout="prev, pager, next"
        :background="true"
      />
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { onMounted, ref, inject } from "vue";
import product from "@/api/product.js";
const allfield = inject("allfield");
const { fieldA, fieldB } = allfield();
const listAll = inject("listAll");
const articleId = inject("articleId");
const total = inject("total");
const page = inject("page");
const router = useRouter();
const productPage = async () => {
  const res = await product.productPage(articleId.value, { page: page.value });
  listAll.value = res.dc4[0]?.list;
  total.value = res.dc4[0]?.total;
};
const handlePage = (pno) => {
  page.value = pno;
  productPage();
};
const jump = (id) => {
  router.push(`/product/details?aid=${id}&id=${articleId.value}`);
};
</script>
<style scoped lang="scss">
.list {
  .pro {
    height: 920px;
    .box {
      display: flex;
      flex-wrap: wrap;
      & > div {
        width: 24.1%;
        height: 280px;
        background-color: #ffffff;
        margin-right: 1.2%;
        margin-bottom: 10px;
        & > div:first-child {
          height: 250px;
        }
        .title {
          height: 20px;
          line-height: 20px;
          text-align: center;
        }
      }
      & > div:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
  .page {
    display: flex;
    justify-content: center;
  }
}
</style>
